<script>
    import Box from './box.svelte'
    import {createEventDispatcher, onMount} from "svelte";
    import {thisuser} from "../src/main";

    const dispatch = createEventDispatcher();

    function sayHello() {

    }

    export let user;
    // onMount(
    //     console.log(user)
    // )
    function deluser(user) {
        dispatch('message', {
            text: 'Hello!'
        });
    }
</script>
<style>
    .userinfo {
        width: 80%;
        height: 20px;
        /*display: flex;*/
        /*justify-content: flex-start;*/
        overflow-y: hidden;
        border: 1px solid #aaa;
        border-radius: 8px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
        padding: 1em;
        margin: 0 0 5px 5px;
    }
</style>

<div class="userinfo">
    <div style="text-align: left;float: left">
    <slot name="name">
        <span>...</span>
    </slot>
    <slot name="info">
        <span>...</span>
    </slot>
    </div>
    <div style="float: right;visibility: {thisuser==='admin'?'visible':'hidden'}">
        <button style="width: 50px;border-radius: 8px;border: 0;visibility: {thisuser==='admin'?'visible':'hidden'}" on:click={deluser}>
            delete
        </button>
    </div>

</div>